<template>
	<div class="hello">
		<header class="mui-bar mui-bar-nav header comeToXQ">
			<div class="local mui-pull-left">
				<h3>你的位置<span style='color:#ffdd00'>{{houseName}}</span><span class="ranking"  v-if='houseCore'>{{houseRank}}</span>名</h3>
				<p v-if='houseCore'><img src="static/images/red-star.png" alt="" style='width:14px;' />&nbsp;性价比得分: <span>{{houseCore}}</span>分</p>
				<p v-if='!houseCore'>暂无性价比分</p>
			</div>
			<a class="mui-icon mui-icon-forward mui-pull-right"></a>
		</header>
		<div class="postion">
			<select name="" class="select0">
			</select>
		</div>
		<div id="container">
		</div>
		<div id="myPageTop">
			<table>
				<tr>
					<td style="position: relative;">
						<label>请输入关键字：</label>
						<!--<i class="mui-icon mui-icon-close" @click="closeSeach" style="position: absolute;right: -18px;top: -18px;background-color: #fff;border-radius: 50%;"></i>-->
					</td>
				</tr>
				<tr>
					<td>
						<input type="text" id="tipinput" />
						<!--<input type="button" class="btn0" value="查询" />-->
						<div class="amap-sug-result rs1">
							<div class="auto-item"  v-for="item1 in listSeach1" :houseId=item1.houseId :houseType=item1.houseType>{{item1.houseName}}<span class="auto-item-span"></span></div>
						</div>
						<div class="amap-sug-result rs2" v-if="listFlag">
							<div class="auto-item" >暂无数据</div>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div class="footer">
			<div class="foo frist" @click="openSeach"><img src="static/images/searchMap.jpg" alt="" /></div>
			<!--<div class="foo second"><img src="../assets/images/ranking.png" alt="" /><br />附近排行</div>-->
			<div class="thrid">
				<router-link to="/">好房排行</router-link>
			</div>
			<!--<div class="foo fourth"><img src="../assets/images/my-ranking.png" alt="" /><br />我的排行</div>-->
			<router-link tag='div' to='/consult' class="foo last"><img src="static/images/comeZx.jpg" alt="" /></router-link>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				houseName: '',
				houseRank: '',
				houseCore: '',
				pointList: [],
				listSeach1:[],
				listSeach2:[],
				listFlag:false,
				flag0:true
			}
		},
		mounted: function() {
			localStorage.setItem("type", "new");
			//定义城市经纬度数组
			let allCityLngLat=[
			    {'cityName':'北京','citylnglat':[116.41667,39.91667]},
			    {'cityName':'上海','citylnglat':[121.43333,31.23000]},
			    {'cityName':'杭州','citylnglat':[120.20000,30.26667]},
			    {'cityName':'广州','citylnglat':[113.23333,23.16667]},
			    {'cityName':'深圳','citylnglat':[114.06667,22.61667]},
			    {'cityName':'西安','citylnglat':[108.95000,34.26667]}
			];
			var that = this;
			var this0 = this;
//			localStorage.setItem("ajaxURL", "http://47.94.93.148:8086");
//			localStorage.setItem("ajaxURL", "http://192.168.0.162:8080");
			
//			localStorage.setItem("ajaxURL", "http://127.0.0.1:8086");
			var cluster, markers = [];
			let city00 = localStorage.getItem('cityName')
			var map = new AMap.Map("container", {
				resizeEnable: true,
				zoom: 13,
			});
			
			mapShow(map);
			
			let ajaxURL=localStorage.getItem("ajaxURL");
			let city0=localStorage.getItem("cityName");
			let cityId = localStorage.getItem('city');
			$('.select0').append(`<option data-cityId=${cityId}>${city0}</opntion>`)
			if(that.flag0){
				that.flag0=false;
					$.ajax({
	                type:"get",
	                url:`${ajaxURL}/houseweb/front/index.do`,
					cache:false,
	                success:function(res){
	                	var data = JSON.parse(res)
	                	that.flag0=true;
	                	console.log(data)
	                	if(data.status==1000){
	                		that.city=data.data;
		                	for(var i=0;i<data.data.length;i++){
		                		if(city0!=data.data[i].cityName){
		                			$('.select0').append(`<option data-cityId=${data.data[i].cityId}>${data.data[i].cityName}</opntion>`);                			
		                		}
		                	}
	                	}else {
	                		that.reload();
	                	}
	                }
	           })
			}
	        
			$('.select0').change(function(){
				var cityId = $(this).children("option:selected").attr('data-cityId');
				var city = $(this).children("option:selected").text();
				localStorage.setItem("city",cityId);
				localStorage.setItem("cityName",city);
				console.log(cityId)
				var data = JSON.parse(localStorage.getItem('data'));
				data.city = cityId;
				data.page=1;
				localStorage.setItem('data', JSON.stringify(data));
				location.reload();
		})	
			
			that.reload();
			
			function mapShow(map0) {
//				根据浏览器ip定位当前城市,并存入缓存中，并改变首页显示，并且只定位一次
				console.log(returnCitySN);
				let shengIdx = returnCitySN.cname.indexOf("省");
				let cityName = returnCitySN.cname.slice(shengIdx + 1, -1);
				let city = returnCitySN.cid;
				
				console.log(localStorage.getItem('city'))
				
				if(localStorage.getItem('city') === null ) {
					localStorage.setItem('city', city);
					localStorage.setItem("cityName", cityName);
					$(".nowadd").text(cityName);
				}else{
					city = localStorage.getItem('city')
				}
				
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					var city1 = localStorage.getItem('cityName');
					for(var i = 0; i<allCityLngLat.length;i++){
						if(allCityLngLat[i].cityName==city1){
							map.setZoomAndCenter(13,allCityLngLat[i].citylnglat);
						}
					}
					if(this.getStatus() == BMAP_STATUS_SUCCESS) {
						localStorage.setItem("nowLngLat", JSON.stringify(r.point));
						//						localStorage.setItem('position',data.position);
						// data/indexdata.json?city=${localStorage.getItem("city")}&houseType=new&lng=${a.lng}&lat=${a.lat}
						//初次请求城市数据s
						let ajaxURL = localStorage.getItem("ajaxURL");
			
						$.ajax({
							type: "get",
							url: `${ajaxURL}/houseweb/H5/indexMapInit_new.do?city=${city}&houseType=new&lng=${r.point.lng}&lat=${r.point.lat}`,
							success: function(res) {
								var mapData = JSON.parse(res)
								that.pointList = mapData.data.points;
//								localStorage.setItem('fireNewHouse',JSON.stringify(mapData.data.fireNewHouse))
//								localStorage.setItem('screenMetro', JSON.stringify(mapData.data.screenMetro));
//								localStorage.setItem('screenPrice', JSON.stringify(mapData.data.screenPrice));
//								localStorage.setItem('screenSpace', JSON.stringify(mapData.data.screenSpace));
//								localStorage.setItem('houseLabel', JSON.stringify(mapData.data.houseLabel));
								let lngLatArr = [];
								let lngLat = {};
								let points = [];
								for(let i in mapData.data.points) {
									lngLatArr.push(mapData.data.points[i].lng);
									lngLatArr.push(mapData.data.points[i].lat);
									lngLatArr.push(mapData.data.points[i].houseCore);
									lngLat.lnglat = lngLatArr;
									points.push(lngLat);
									lngLatArr = [];
									lngLat = {};
								}
								for(var i = 0; i<allCityLngLat.length;i++){
									if(cityName==city1){
										addMarker();
									}
								}
//								addMarker();
								//添加marker标记
								function addMarker() {
									map.clearMap();
									var icon = new AMap.Icon({
										size: new AMap.Size(40, 50), // 图标尺寸
										image: 'static/images/nearby-location.png', // Icon的图像
										imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
										imageSize: new AMap.Size(40, 40) // 根据所设置的大小拉伸或压缩图片
									});
									var marker = new AMap.Marker({
										map: map,
										resizeEnable: true
									});
									marker.setIcon(icon);
									AMap.event.addListener(marker, 'click', function() {
										var title = `附近楼盘：${mapData.data.nowMsg.houseName}`
										var content ='';
										if(mapData.data.nowMsg.houseCore=='暂无性价比'){
											content = `<div class="local mui-pull-left">
												<h3 style='font-size:14px;'>你的位置<span style='color:#ffdd00'>${mapData.data.nowMsg.houseName}</span>在全市暂无排名</h3>
										   		<p style="color:#fff;font-size:14px;">`;
										}else{
											content = `<div class="local mui-pull-left">
												<h3 style='font-size:14px;'>你的位置<span style='color:#ffdd00'>${mapData.data.nowMsg.houseName}</span>在全市排名<span class='ranking'>${nowRank}</span>名</h3>
										   		<p style="color:#fff;font-size:14px;">`;
										}
											
										var star = that.hasStar(mapData.data.nowMsg.houseCore)
										
										if(mapData.data.nowMsg.houseCore=='暂无性价比'){
											content += `<p style='color:#fff;'>暂无性价比分</p></div>`;
										}else{
											for(var i = 0; i < star.length - 1; i++) {
												content += `<img data-v-3868e034="" src="${star[i]}" alt="" style='width:14px;'>`
											}
											content += `<img data-v-3868e034="" src="static/images/prompt-star.png" alt="" style='width:14px;'>`;
											content += `&nbsp;性价比得分: <span>${mapData.data.nowMsg.houseCore.toFixed(2)}</span>分</p>
										   </div>`;
										}
										content+=`<a class="mui-icon mui-icon-forward mui-pull-right" data-xiangqing='${mapData.data.nowMsg.houseId}'></a>`
										$('.header').html(content);
									});

								}

								var nowRank = 0;
								for(var i in mapData.data.points) {
									if(mapData.data.nowMsg.houseName == mapData.data.points[i].houseName) {
										++i;
										nowRank = i;
									}
								}
								//实例化信息窗体
								var title = `附近楼盘：${mapData.data.nowMsg.houseName}`;
								var content = '';
								console.log(mapData.data.nowMsg.houseCore)
								if(mapData.data.nowMsg.houseCore!='暂无性价比'){
									content = `<div class="local mui-pull-left">
								   		<h3 style='font-size:14px;'>你的位置<span style='color:#ffdd00'>${mapData.data.nowMsg.houseName}</span>在全市排名<span class='ranking'>${nowRank}</span>名</h3>
								   		<p style="color:#fff;font-size:14px;">`;
								}else{
									content = `<div class="local mui-pull-left">
								   		<h3 style='font-size:14px;'>你的位置<span style='color:#ffdd00'>${mapData.data.nowMsg.houseName}</span>在全市暂无排名</h3>
								   		<p style="color:#fff;font-size:14px;">`;
								}
								
								var star = that.hasStar(mapData.data.nowMsg.houseCore)
								for(var i = 0; i < star.length - 1; i++) {
									content += `<img data-v-3868e034="" src="${star[i]}" alt="" style='width:14px;'>`
								}
								if(mapData.data.nowMsg.houseCore!='null'){
									content += `<img data-v-3868e034="" src="static/images/prompt-star.png" alt="" style='width:14px;'>`;

									content += `&nbsp;性价比得分: <span>${mapData.data.nowMsg.houseCore.toFixed(2)}</span>分</p>
								   </div>`;
								
								}else{
									content += `<p  style='color:#fff;'>暂无性价比分</p></div>`
								}
								content+=`<a class="mui-icon mui-icon-forward mui-pull-right" data-xiangqing='${mapData.data.nowMsg.houseId}'></a>`
								$('.header').html(content);

								for(var i = 0; i < mapData.data.points.length; i += 1) {
									var score = mapData.data.points[i].houseCore;
									//									console.log(score)
									markers.push(new AMap.Marker({
										position: points[i]['lnglat'],
										content: `<div newId=${i+1} houseId=${mapData.data.points[i].houseId} score=${score} lat="+points[i]['lnglat']+" style='position:relative;height: 50px; width: 50px;  border-radius: 50%;' class='newhouse' name0=${mapData.data.points[i].houseName}><img src='static/images/icon-house.png' style='width: 100%;'></div>`,
										offset: new AMap.Pixel(-15, -15)
									}));
								}
								var count = markers.length;
								var _renderCluserMarker = function(context) {
									var factor = Math.pow(context.count / count, 1 / 18);
									var div = document.createElement('div');
									var Hue = 180 - factor * 180;
									var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
									div.innerHTML = "<div style='position:relative; height: 50px; width: 50px;  border-radius: 50%;'><img src='static/images/icon-house.png' style='width: 100%;'></div>";
									div.style.lineHeight = 44 + 'px';
									div.style.color = '#000';
									div.style.fontSize = '10px';
									div.style.textAlign = 'center';
									context.marker.setOffset(new AMap.Pixel(-44 / 2, -44 / 2));
									context.marker.setContent(div)
								}
								cluster = new AMap.MarkerClusterer(map, markers, {
									gridSize: 80
								});
								addCluster(2);

								$('#container').on('touchend', '.newhouse', function(e) {
//									if($(this).attr('score')=='null'){
//										$(this).attr('score','暂无数据');
//									}
									var arr = $(this).attr('lat').split(',');
									var houseName0 = $(this).attr('name0')
									var content='';
									if($(this).attr('score')!='null'){
									content = `<div class="local mui-pull-left">
								   		<h3 style='font-size:14px;'>你所选位置<span style='color:#ffdd00'>${houseName0}</span>在全市排名<span class='ranking'>${$(this).attr('newId')}</span>名</h3>
								   		<p style="color:#fff;font-size:14px;">`;	
									}else{
									content = `<div class="local mui-pull-left">
								   		<h3 style='font-size:14px;'>你所选位置<span style='color:#ffdd00'>${houseName0}</span>在全市暂无排名</h3>
								   		<p style="color:#fff;font-size:14px;">`;	
									}
									
									var star = that.hasStar($(this).attr('score'))
									for(var i = 0; i < star.length - 1; i++) {
										content += `<img data-v-3868e034="" src="${star[i]}" alt="" style='width:14px;'>`
									}
									if($(this).attr('score')!='null'){
										content += `<img data-v-3868e034="" src="static/images/prompt-star.png" alt="" style='width:14px;'>`;
									
										content += `&nbsp;性价比得分: <span>${$(this).attr('score').toFixed(2)}</span>分</p>
									   </div>`;
									}else{
										content += `<p  style='color:#fff;'>暂无性价比分</p></div>`
									}
									content+=`<a class="mui-icon mui-icon-forward mui-pull-right" data-xiangqing='${$(this).attr('houseId')}'></a>`
									$('.header').html(content);
									//									this0.houseName=houseName0,
									//									this0.houseRank=mapData.data.nowMsg.houseRank,
									//									this0.houseCore=mapData.data.nowMsg.houseCore
								})

								function addCluster(tag) {
									if(cluster) {
										cluster.setMap(null);
									}
									if(tag == 2) { //完全自定义
										cluster = new AMap.MarkerClusterer(map, markers, {
											gridSize: 80,
											renderCluserMarker: _renderCluserMarker
										});
									} else if(tag == 1) { //自定义图标
										var sts = [{
											url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
											size: new AMap.Size(32, 32),
											offset: new AMap.Pixel(-16, -16)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/green.png",
											size: new AMap.Size(32, 32),
											offset: new AMap.Pixel(-16, -16)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
											size: new AMap.Size(36, 36),
											offset: new AMap.Pixel(-18, -18)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/red.png",
											size: new AMap.Size(48, 48),
											offset: new AMap.Pixel(-24, -24)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
											size: new AMap.Size(48, 48),
											offset: new AMap.Pixel(-24, -24)
										}];
										cluster = new AMap.MarkerClusterer(map, markers, {
											styles: sts,
											gridSize: 80
										});
									} else { //默认样式
										cluster = new AMap.MarkerClusterer(map, markers, {
											gridSize: 80
										});
									}
								}

								$(".newhouse .star").html("111");
							}
						});

					}else {
						//初次请求城市数据
						let ajaxURL = localStorage.getItem("ajaxURL");
						let cityName = localStorage.getItem("cityName");
						$.ajax({
							type: "get",
							url: `${ajaxURL}/houseweb/H5/indexMapInit_new.do?city=${city}&houseType=new`,
							cache: false,
							success: function(res) {
								var mapData = JSON.parse(res)
								that.pointList = mapData.data.points;
//								localStorage.setItem('fireNewHouse',JSON.stringify(mapData.data.fireNewHouse))
//								localStorage.setItem('screenMetro', JSON.stringify(mapData.data.screenMetro));
//								localStorage.setItem('screenPrice', JSON.stringify(mapData.data.screenPrice));
//								localStorage.setItem('screenSpace', JSON.stringify(mapData.data.screenSpace));
//								localStorage.setItem('houseLabel', JSON.stringify(mapData.data.houseLabel));
								let lngLatArr = [];
								let lngLat = {};
								let points = [];
								for(let i in mapData.data.points) {
									lngLatArr.push(mapData.data.points[i].lng);
									lngLatArr.push(mapData.data.points[i].lat);
									lngLatArr.push(mapData.data.points[i].houseCore);
									lngLat.lnglat = lngLatArr;
									points.push(lngLat);
									lngLatArr = [];
									lngLat = {};
								}

				

								var nowRank = 0;
								for(var i in mapData.data.points) {
									if(mapData.data.nowMsg.houseName == mapData.data.points[i].houseName) {
										++i;
										nowRank = i;
									}
								}
//								实例化信息窗体
								var title = `附近楼盘：${mapData.data.nowMsg.houseName}`,
									content = `<div class="local mui-pull-left">
								   		<h3 style='font-size:14px;'>${cityName}的<span style='color:#ffdd00'>${mapData.data.points[0].houseName}</span>在全市性价比排名<span class='ranking'>1</span>名</h3>
								   		<p style="color:#fff;font-size:14px;">`;
								var star = that.hasStar(mapData.data.points[0].houseCore)
								
//								content += `<img data-v-3868e034="" src="static/images/prompt-star.png" alt="" style='width:14px;'>`;
								if(mapData.data.points[0].houseCore){
									for(var i = 0; i < star.length; i++) {
										content += `<img data-v-3868e034="" src="${star[i]}" alt="" style='width:14px;'>`
									}
									content += `&nbsp;性价比得分: <span >${mapData.data.points[0].houseCore.toFixed(2)}</span>分</p>
								   </div>`;
								
								}else{
									content += `<p  style='color:#fff;'>暂无性价比分</p></div>`
								}
								content+=`<a class="mui-icon mui-icon-forward mui-pull-right" data-xiangqing='${mapData.data.points[0].houseId}'></a>`
								$('.header').html(content);

								for(var i = 0; i < mapData.data.points.length; i += 1) {
									var score = mapData.data.points[i].houseCore;
									//									console.log(score)
									markers.push(new AMap.Marker({
										position: points[i]['lnglat'],
										content: `<div newId=${i+1} houseId=${mapData.data.points[i].houseId} score=${score} lat="+points[i]['lnglat']+" style='position:relative;height: 50px; width: 50px;  border-radius: 50%;' class='newhouse' name0=${mapData.data.points[i].houseName}><img src='static/images/icon-house.png' style='width: 100%;'></div>`,
										offset: new AMap.Pixel(-15, -15)
									}));
								}
								var count = markers.length;
								var _renderCluserMarker = function(context) {
									var factor = Math.pow(context.count / count, 1 / 18);
									var div = document.createElement('div');
									var Hue = 180 - factor * 180;
									var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
									div.innerHTML = "<div style='position:relative; height: 50px; width: 50px;  border-radius: 50%;'><img src='static/images/icon-house.png' style='width: 100%;'></div>";
									div.style.lineHeight = 44 + 'px';
									div.style.color = '#000';
									div.style.fontSize = '10px';
									div.style.textAlign = 'center';
									context.marker.setOffset(new AMap.Pixel(-44 / 2, -44 / 2));
									context.marker.setContent(div)
								}
								cluster = new AMap.MarkerClusterer(map, markers, {
									gridSize: 80
								});
								addCluster(2);

								$('#container').on('touchend', '.newhouse', function(e) {
//									if($(this).attr('score')=='null'){
//										$(this).attr('score','暂无数据');
//									}
									var arr = $(this).attr('lat').split(',');
									var houseName0 = $(this).attr('name0')
									var content='';
									if($(this).attr('score')!='null'){
										content = `<div class="local mui-pull-left">
								   		<h3 style='font-size:14px;'>你所选位置<span style='color:#ffdd00'>${houseName0}</span >在全市排名<span class='ranking'>${$(this).attr('newId')}</span>名</h3>
								   		<p style="color:#fff;font-size:14px;">`;
									}else{
										content = `<div class="local mui-pull-left">
								   		<h3 style='font-size:14px;'>你所选位置<span style='color:#ffdd00'>${houseName0}</span >在全市暂无数据</h3>
								   		<p style="color:#fff;font-size:14px;">`;
									}
									var star = that.hasStar($(this).attr('score'))
									if($(this).attr('score')!='null'){
										for(var i = 0; i < star.length - 1; i++) {
											content += `<img data-v-3868e034="" src="${star[i]}" alt="" style='width:14px;'>`
										}
										content += `<img data-v-3868e034="" src="static/images/prompt-star.png" alt="" style='width:14px;'>`;
										
										content += `&nbsp;性价比得分: <span>${$(this).attr('score').toFixed(2)}</span>分</p>
									   </div>`;
										
									}else{
										content += `<p style='color:#fff;'>暂无性价比分</p></div>`
									}
									content+=`<a class="mui-icon mui-icon-forward mui-pull-right" data-xiangqing='${$(this).attr('houseId')}'></a>`
									$('.header').html(content);
								})

								function addCluster(tag) {
									if(cluster) {
										cluster.setMap(null);
									}
									if(tag == 2) { //完全自定义
										cluster = new AMap.MarkerClusterer(map, markers, {
											gridSize: 80,
											renderCluserMarker: _renderCluserMarker
										});
									} else if(tag == 1) { //自定义图标
										var sts = [{
											url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
											size: new AMap.Size(32, 32),
											offset: new AMap.Pixel(-16, -16)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/green.png",
											size: new AMap.Size(32, 32),
											offset: new AMap.Pixel(-16, -16)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
											size: new AMap.Size(36, 36),
											offset: new AMap.Pixel(-18, -18)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/red.png",
											size: new AMap.Size(48, 48),
											offset: new AMap.Pixel(-24, -24)
										}, {
											url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
											size: new AMap.Size(48, 48),
											offset: new AMap.Pixel(-24, -24)
										}];
										cluster = new AMap.MarkerClusterer(map, markers, {
											styles: sts,
											gridSize: 80
										});
									} else { //默认样式
										cluster = new AMap.MarkerClusterer(map, markers, {
											gridSize: 80
										});
									}
								}

								$(".newhouse .star").html("111");
							}
						});
					}
				}, {
					enableHighAccuracy: true
				})
			}

			//进入详情
			$('.hello').on('click', 'header', function() {
				that.comeXiangqing($(this).children('a').attr('data-xiangqing'),$('.ranking').text(),'new');
				
			})
			$('.amap-sug-result').on('click','div',function() {
//				console.log($(this).attr('houseId'))
				that.comeXiangqing($(this).attr('houseId'),1,$(this).attr('houseType'))
			})
			let city11 = JSON.parse(localStorage.getItem('city'));
			
			//keyup的兼容性处理
			var bind_name = 'input';
			if (navigator.userAgent.indexOf("MSIE") != -1) {
			 bind_name = 'propertychange';
			}//（此处是为了兼容IE）
			if(navigator.userAgent.match(/android/i) == "android")
			{
			 bind_name = "keyup";
			}
			
			
			$('#tipinput').on(bind_name, function() {
				var myReg = /^[\u4e00-\u9fa5]+$/;
				var input0 = $('#tipinput').val()
				if(input0==''){
					that.listSeach1=[];
					that.listFlag=true;
					$('.amap-sug-result').hide()
				}
				if(myReg.test(input0)){
					$('.amap-sug-result').show()
					$.ajax({
							type:"get",
							url:`${ajaxURL}/houseweb/H5/allHouseListSearch.do`,
							async:true,
							data:{
								city:city11,
								keyWord:input0
							},
							success:function(res){
								var data = JSON.parse(res)
								that.listSeach1=data.data.keyWordSearch;
								if(that.listSeach1.length==0){
									that.listFlag=true;
								}else {
									that.listFlag=false;
								}
							}
						});
				}
			})
				
		},
		methods: {
			openSeach: function() {
				$('#myPageTop').toggle(500)
			},
//			closeSeach: function() {
//				$('#myPageTop').hide(500)
//			},
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore/20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str!=5) {
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) <5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
			comeXiangqing: function(id,rank,type) {
				this.$router.push({
					path: '/morexiangqing',
					name: 'morexiangqing',
					query: {
						id: id,
						type: type,
						ranking:rank
					}
				});
			},
			reload: function() {
				var city0 = localStorage.getItem('city');
				var type='new';
				if(localStorage.getItem('type')){
					type = localStorage.getItem('type');
				}
				var obj = {};
				var data = {
					city: city0,
					page: 1,
					houseType: type,
					lng: '',
					lat: '',
					screenNearBy: {
						screenNearByNum: obj.screenNearBy,
						screenNearBySign: obj.screenNearBySign
					},
					screenPrice: {
						screenPriceNum: obj.screenPrice,
						screenPriceSign: obj.screenPriceSign
					},
					screenHuXing: obj.screenHuXing,
					screenCharacteristic: obj.screenCharacteristic,
					screenMetro: obj.screenMetro,
					screenMetroer: obj.screenMetroer,
					screenSpace: obj.screenSpace,
					screenTradArea: obj.screenTradArea,
					cheWeiBi: {
						cheWeiBiNum: obj.cheWeiBi,
						cheWeiBiSign: obj.cheWeiBiSign
					},
					sheQuGuiMo: obj.sheQuGuiMo,
				}
				localStorage.setItem('data', JSON.stringify(data));
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.postion {
		position: fixed;
		bottom: 80px;
		right: 10px;
		z-index: 999;
		border-radius: 2px;
	}
	.postion select {
		/*height: 30px;*/
		/*padding: 0 10px;*/
		/*margin: 0;*/
	}
	
	.mui-bar .mui-icon {
		color: #fff;
		line-height: 40px;
	}
	.hello .header {
		height: 60px;
		background-color: #0186c2;	
		position: fixed;
		box-shadow: none;
	}
	.footer {
		z-index: 9999;
		width: 100%;
		height: 118px;
		position: fixed;
		bottom: -9px;
		background: url(../assets/../assets/images/ellipse.png) no-repeat center;
		background-size: cover;
	}
	
	.footer>div {
		position: absolute;
		text-align: center;
	}
	
	.footer .foo {
		width: 50px;
		height: 50px;
		font-size: 12px;
	}
	
	.footer>div img {
		height: 28px;
	}
	
	.frist {
		left: 20px;
		bottom: 1px;
	}
	
	.second {
		bottom: 50px;
		left: 80px;
	}
	
	.last {
		right: 20px;
		bottom: 0px;
	}
	
	.fourth {
		bottom: 50px;
		right: 80px;
	}
	
	.thrid {
		width: 80px;
		height: 80px;
		font-size: 14px;
		top: 13px;
		left: 50%;
		transform: translate(-50%);
		background-color: #0186c2;
		border-radius: 50%;
		text-align: center;
		line-height: 80px;
	}
	.thrid a {
		line-height: 80px;
	}
	#container {
		position: absolute!important;
		width: 100%;
		height: 100%;
	}
	
	#myPageTop {
		display: none;
		position: fixed;
		width: 80%;
		height: 80px;
		top: 130px;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 14px;
		background: none 0px 0px repeat scroll rgb(255, 255, 255);
		border-width: 1px;
		border-style: solid;
		border-color: rgb(204, 204, 204);
		border-image: initial;
		margin: 10px auto;
		padding: 6px;
	}
	
	#myPageTop table {
		width: 100%;
		/*display: table;*/
		border-collapse: separate;
		border-spacing: 2px;
		border-color: grey
	}
	
	#myPageTop label {
		margin: 0 20px 0 0;
		color: #999;
		font-weight: normal;
	}
	
	#myPageTop #tipinput {
		width: 100%;
		font-size: 12px;
		padding: 2px 5px;
		margin-bottom: 4px;
		color: #333;
		height: 25px;
	}
	
	#myPageTop .btn0 {
		width: 20%;
		height: 25px;
		padding: 2px;
	}
	.amap-sug-result {
		position: absolute;
		width: 94%; 
		height: auto;
		max-height: 140px;
		overflow: auto;
		display: none;
		background-color: #fefefe;
    	border: 1px solid #d1d1d1;
	}
	.auto-item {
	    white-space: nowrap;
	    font-size: 12px;
	    cursor: pointer;
	    padding: 4px;
	} 
	.auto-item-span {
	    color: #c1c1c1;
	    padding-left: 4px;
	}
</style>